import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class CommentAdd extends Component {
    state = {
        username: '',
        content: ''
    }
    /**
     * 属性验证
     */
    static propTypes = {
        addComment: PropTypes.func.isRequired
    }
    handleClick = () => {
        const comment = this.state
        this.props.addComment(comment)
        this.setState(
            {
                username: '',
                content: ''
            }
        )
    }
    handleNameChange = (event) => {
        this.setState({ username: event.target.value })
    }
    handleContentChange = (event) => {
        this.setState({ content: event.target.value })
    }
    render() {
        return (
            <div>
                <div className="form-group">
                    <label htmlFor="exampleInputEmail1">用户名</label>
                    <input type="email" className="form-control" id="exampleInputEmail1" placeholder="用户名" value={this.state.username}
                        onChange={this.handleNameChange} />
                </div>
                <div className="form-group">
                    <label htmlFor="exampleTextarea">评论内容</label>
                    <textarea className="form-control" rows="3" placeholder="评论内容" id="exampleTextarea"
                        onChange={this.handleContentChange} value={this.state.content}></textarea>
                </div>
                <button type="button" className="btn btn-success btn-lg btn-block" onClick={this.handleClick}>提交</button>
            </div>
        )
    }
}
